GuideFeb 20, 202612 min read

HTML Email Best Practices for 2026

Priya Sharma — Email developer from Bangalore, India. Priya has debugged rendering issues across Gmail, Outlook, and Apple Mail for 50+ enterprise campaigns. She specializes in cross-client compatibility solutions.

Email clients still don't behave like web browsers. Even though the web has become more consistent with modern HTML/CSS, email rendering is still fragmented — so you have to design for limitations. This post is a cornerstone of our ultimate guide to HTML email testing.

CSS Strategies: Inline vs Internal vs External

Inline CSS Remains the Safest Baseline

While internal CSS (<style>) is more supported now than ever before, inline CSS remains the safest baseline for email development. This is especially important when designing for both Gmail and Outlook, which handle CSS differently. Internal CSS works in a large majority of clients, but you still need to follow certain rules.

Many teams use internal CSS only for "progressive enhancements" while keeping core styles inline. This hybrid approach ensures your email looks acceptable everywhere while taking advantage of better rendering in modern clients.

Avoid External Stylesheets

External stylesheets (<link rel="stylesheet">) are mostly a no-go. Support is very low compared to internal/inline styling. Don't rely on them.

Responsive Design with Media Queries

Media queries help with responsive email, but support isn't universal. The key is to build layouts that still look okay when they collapse into a simple vertical layout.

Best Practice: Keep media queries simple — avoid nesting and keep conditions basic. Your email should be readable even if media queries are completely ignored.

Tables Are Still King

Tables are still the most reliable layout tool for email. Even though <div> is widely supported, modern layout systems like CSS Grid are poorly supported, and Flexbox support gets messy once you rely on related flex properties. For responsive email templates, table-based layouts remain the industry standard.

In practice, tables are still the safer choice for consistent layout across email clients. Yes, it feels like 2005 — but it works. Make sure your table widths follow our email width best practices for proper scaling.

✓ Safe to Use

HTML Tables for layout
Inline CSS
Internal CSS (with fallbacks)
Simple media queries
Basic fonts (Arial, Georgia, etc.)

✗ Avoid or Use with Caution

CSS Grid
Flexbox (complex properties)
External stylesheets
Nested media queries
Web fonts (without fallbacks)

CSS/HTML Features to Avoid

Due to poor support across email clients, avoid or use fallbacks for these features:

box-shadow — Not supported in Outlook and many others
aspect-ratio — Very limited support
calc() — Inconsistent behavior across clients
rem units — Use px instead for predictable sizing
CSS variables (--custom-property) — Not supported in most clients
Semantic HTML elements — Many may be stripped by email clients

The Core Takeaway

Prioritize compatibility over creativity. Use fallbacks for anything beyond basic styling, and test regularly across clients and devices.

The goal isn't to build the most beautiful email — it's to build an email that looks good everywhere your audience reads it.

Test Before You Send

The best practices in the world won't help if you don't verify your email actually renders correctly. Use a preview tool to check your HTML email across Gmail, Outlook, Apple Mail, and mobile clients before hitting send.

Preview Your Email Now

See how your HTML email renders across 10+ email clients instantly.

Try MailViewr Free →